<script setup lang="ts">


import { computed, ref, watch } from 'vue';

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

// 设置 初始默认值&获取LocalStroage的值
const saveList =localStorage.getItem('fruits')
// console.log(saveList) 当没有保存值的时候 为null
let fruitList = ref<Fruit[]>([])

if (saveList==null) {
    fruitList.value = [
  {
    id: 1,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
    isChecked: true,
    num: 2,
    price: 6,
  },
  {
    id: 2,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
    isChecked: false,
    num: 7,
    price: 20,
  },
  {
    id: 3,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
    isChecked: false,
    num: 3,
    price: 40,
  },
  {
    id: 4,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
    isChecked: false,
    num: 10,
    price: 3,
  },
  {
    id: 5,
    icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
    isChecked: true,
    num: 20,
    price: 34,
  },
]
}else{
  fruitList.value =JSON.parse(saveList) 
}

// 水果列表
// const fruitList = ref<Fruit[]>([
//   {
//     id: 1,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
//     isChecked: true,
//     num: 2,
//     price: 6,
//   },
//   {
//     id: 2,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
//     isChecked: false,
//     num: 7,
//     price: 20,
//   },
//   {
//     id: 3,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
//     isChecked: false,
//     num: 3,
//     price: 40,
//   },
//   {
//     id: 4,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
//     isChecked: false,
//     num: 10,
//     price: 3,
//   },
//   {
//     id: 5,
//     icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
//     isChecked: true,
//     num: 20,
//     price: 34,
//   },
// ],)
// 累加
const addNum =(id:number) =>{
 const item = fruitList.value.find(item=>item.id == id)
//  item?.num++ 这边item 需要使用短路运算
  item && item.num++
}

// 累减
const decreaseNum =(id:number)=>{
  const item = fruitList.value.find((item)=>item.id == id)
  if(item && item.num>0){
    item.num--
  }
}


// 删除

const delNum =(id:number)=>{
  //  fruitList.value.filter(item => item.id !=id) 这样是错
  fruitList.value = fruitList.value.filter(item => item.id !=id)
}

// 全选和反选 这里因为要修改获取到的数值所以要用到computed中的get 和set 属性

const allChecked= computed({
  get(){
    return fruitList.value.every(item=>item.isChecked)
  },
  set(NewValue){
    fruitList.value.forEach(item=>item.isChecked = NewValue)
  }
}) 

// 总个数  链式编程
const totalCount = computed(()=>{
  
  return fruitList.value
     .filter(item=>item.isChecked)
     .reduce((pre,item)=>pre+item.num,0)
})


// 计算总价
// const totalPrice = computed(()=>{
//  const res = fruitList.value.reduce((pre,item)=>{
//     if(item.isChecked === true){
//       return pre + item.num*item.price
//     }
//   },0)
//   return res
// })

const totalPrice = computed(()=>{
  return fruitList.value
  .filter(item=>item.isChecked)
  .reduce((pre,item)=>pre+item.num*item.price ,0)
})


// 数据持久化
watch(fruitList,
  ()=>{
    localStorage.setItem('fruits',JSON.stringify(fruitList.value) )
  },
  {deep:true}
)

</script>


<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length>0" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <div class="td"><input v-model="item.isChecked" type="checkbox" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{item.price}}</div>
            <div class="td">
              <div class="my-input-number">
                <button @click="decreaseNum(item.id)" class="decrease"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button @click="addNum(item.id)" class="increase"> + </button>
              </div>
            </div>
            <div class="td">{{item.num * item.price}}</div>
            <div @click="delNum(item.id)" class="td"><button>删除</button></div>
          </div>

         
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input v-model="allChecked" type="checkbox" />
          全选
        </label>  
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button  class="pay">结算( {{ totalCount }} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>